<template>
  <div>
    <div class="head">
      <img :src="'back.png' | imagePath" class="head-back">
      <p>添加型号</p>
      <span></span>
    </div>
    <div class="putScanModel">
      <div class="putScanModel-item">
        <span>类别选择</span>
        <p
          @click="currentIndex = index"
          :class="currentIndex== index ? 'active' : ''"
          v-for="(item,index) in ['铅酸','锂电']"
          :key="item">
          <em></em>{{item}}
        </p>
      </div>
      <div class="putScanModel-item">
        <span>电池型号</span>
        <input type="text" placeholder="请选择电池型号">
        <img :src="'toRight.png' | imagePath" />
      </div>
      <div class="putScanModel-item" v-if="currentIndex == 1">
        <span style="color: #FFFFFF;">具体型号</span>
        <input type="text" placeholder="请输入具体型号">
      </div>
    </div>

    <div class="putScanModel-btn">添加</div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        currentIndex:0
      }
    },
    beforeCreate() {
      document.querySelector('body').setAttribute('style', ' background:#FFFFFF')
    }
  }
</script>
<style>
  .putScanModel-item{
    border-bottom: 1px solid #EEEEEE;
    height: 1.46rem;
    display: flex;
    align-items: center;
  }
  .putScanModel-item span{
    font-size: 0.38rem;
    margin-right: 0.8rem;
    margin-left: 0.4rem;
  }
  .putScanModel-item p{
    display: flex;
    align-items: center;
    margin-right: 0.93rem;
  }
  .putScanModel-item p em{
    width: 0.4rem;
    height: 0.4rem;
    background: url(../../assets/images/check.png) no-repeat;
    background-size: 100% 100%;
    margin-right: 0.17rem;
  }
  .putScanModel-item input{
    flex: 1;
  }
  .putScanModel-item img{
    width: 0.16rem;
    height: 0.29rem;
    margin-right: 0.4rem;
  }
  .putScanModel-item p.active em{
    background: url(../../assets/images/checked.png) no-repeat;
    background-size: 100% 100%;
  }
  .putScanModel-btn{
    width: 6.93rem;
    border-radius: 0.66rem;
    background-color: #6EC6C6;
    color: #FFFFFF;
    text-align: center;
    padding: 0.33rem 0;
    font-size: 0.38rem;
    margin: 1.33rem auto;
  }
</style>
